<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <style>
        .book{
            border: 1px solid #000;
            padding: 14px 0 14px 44px;
            border-radius: 10px;
        }
        table td{
            border:1px solid #ccc;
            padding:14px
        }
        .showTime{
            background-color: black;
            color:#fff;
            font-size: 36px;
            padding:14px;
            border: 4px;
        }
       
        .close{
            background-color: #000;
        }
    </style>
    <!--引入jq-->
    <script src="js/jquery.min.js"></script>
</head>
<body>
   <h1 class="love">我最喜欢的电影作品</h1>
   <ul id="movie">
       <li>教父</li>
       <li>绿皮书</li>
       <li>机械师</li>
       <li>围城</li>
       <li>X战警</li>
   </ul> 
   <button>登陆</button>
   <a href="">登陆</a>
   <p class="mountain">大山的子孙</p>

   <h3><span>我和你，男和女</span></h3>

   <hr>
   <hr>
   <hr>
   <h2>练习</h2>
   <a class="login">请登录</a>

   <input type="text" value="登月僧"/>

   <img src="img/dark.jpg" alt="">

   <button>变白天</button>

   <!--这个就是新增属性-->
   <img src="img/zz.png" lazyImg="img/dark.jpg" alt="" class="lazy">

   <ol class="book" style="background:pink">
    <li>格林童话</li>
    <li>狼性</li>
    <li>他改变了中国</li>
   </ol>

   <table class="result">
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>杨浦</td>
        <td class="tdYP"></td>
        <td><button class="btnYP">查看</button></td>
    </tr>
    <tr>
        <td>将好奇</td>
        <td class="tdHQ"></td>
        <td><button class="btnHQ">查看</button></td>
    </tr>
   </table>

   <h4>添加类</h4>
   <div class="music">点亮你的摇滚乐，I LOVE ROCK MUSIC！！！！</div>
   <button class="remMusic"></button>

   <button class="openClose">关灯</button>
</body>
<script src="js/index.js"></script>
<script src="js/myJq.js"></script>
</html>